<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<title>movie-gallery3d</title>
	<meta charset="utf-8">
	<!-- Tell IE to use the latest, best version. -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link href="css/style.css" rel="stylesheet">
	<link href="css/font-awesome.min.css" rel="stylesheet">
	<link href="css/jquery-ui.min.css" rel="stylesheet">
</head>

<body>
	<h1>豆瓣近期影片 <small id="date"></small></h1>
	<div id="threejs-container">
		<p style="margin-top:100px">Loading...</p>
	</div>
	<article id="detail">
		<h2 id="title">影片名字</h2>
		<section id="infos">
			<p>导演：<span id="director"></span></p>
			<p>编剧：<span id="writer"></span></p>
			<p>主演：<span id="actors"></span></p>
			<p>类型：<span id="genre"></span></p>
			<p>制片国家/地区：<span id="country"></span></p>
			<p>语言：<span id="language"></span></p>
			<p>片长：<span id="runtime"></span></p>
		</section>
		<aside id="rating">
			<p>豆瓣评分</p>
			<div>
				<strong id="ratingnum"></strong>
				<span id="starsscore">
					<span class="stars"></span>
				<span id="ratingsum"></span>
				</span>
			</div>
			<div id="starswrap">
				<span class="starstop" title="力荐">
					5星 
                </span>
				<span class="power" style="width:0px"></span>
				<span class="rating_per">0%</span>
				<br>
				<span class="starstop" title="推荐">
					4星 
                </span>
				<span class="power" style="width:0px"></span>
				<span class="rating_per">0%</span>
				<br/>
				<span class="starstop" title="还行">
					3星 
                </span>
				<span class="power" style="width:0px"></span>
				<span class="rating_per">0%</span>
				<br/>
				<span class="starstop" title="较差">
					2星 
                </span>
				<span class="power" style="width:0px"></span>
				<span class="rating_per">0%</span>
				<br/>
				<span class="starstop" title="很差">
					1星 
                </span>
				<span class="power" style="width:0px"></span>
				<span class="rating_per">0%</span>
				<br/>
			</div>
		</aside>
		<article id="moreinfos">
			<div>
				<div id="radio">
					<input type="radio" id="radio1" name="radio"><label for="radio1">剧情简介</label>
					<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">热门短评</label>
				</div>
			</div>
			<section id="comments"></section>
			<section id="summary" style="visibility: hidden"></section>
		</article>
	</article>
	<a href="https://github.com/hanmag/movie-gallery3d">
		<img id="github" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub">
	</a>
	<script src="js/lib/Detector.js"></script>
	<script src="js/lib/jquery.min.js"></script>
	<script src="js/lib/jquery-ui.min.js"></script>
	<script src="js/lib/three.min.js"></script>
	<script src="js/lib/CSS3DRenderer.js"></script>
	<script src="js/lib/tween.min.js"></script>
	<script src="js/main.js"></script>
	<script>
		$(function () {
			$("input").checkboxradio({
				icon: false
			});
			$("#radio").buttonset();

			$("#radio1").click(function () {
				$("#comments").css("visibility", "hidden");
				$("#summary").css("visibility", "visible");
			});

			$("#radio2").click(function () {
				$("#comments").css("visibility", "visible");
				$("#summary").css("visibility", "hidden");
			});
		});
	</script>
</body>

</html>